<template>
    <div class="service-notice">
        <c-wrap title="公告通知">
            <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                         @bottom-status-change="loadMore">
                <div v-if="data.length>0" :style="{height:height+'px','overflow-y':'auto'}">
                    <mt-cell v-for="(item, index) in data" :key="index">
                        <div style="float: left;position: relative;">
                            <icon :clazz="iconData[index]" style="width: 24px;height: 24px;"></icon>
                        </div>
                        <span style="opacity: 0.5;position:relative;left: 20px">{{item.content}}</span>
                    </mt-cell>
                </div>
                <div v-else :style="{height:height+'px','line-height':height+'px'}">暂无数据</div>
            </mt-loadmore>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top,
                allLoaded: false,
                pageSize: 10,
                total: 0,
                data: [],
                iconData: ['icon-yewu-zi', 'icon-xitongtongzhi', 'icon-gonggao21', 'icon-xiaoxi5', 'icon-gonggao4', 'icon-yewu', 'icon-jilu', 'icon-jilu1', 'icon-zhifu', 'icon-xiaoxi1']
            }
        },
        methods: {
            setIconData() {
                if (this.data.length > 10) {
                    let index = this.data.length.toString().split('');
                    for (let i = 0; i < index[0]; i++) {
                        for (let j = 0; j < 10; j++) {
                            this.iconData.push(this.iconData[j]);
                        }
                    }
                }
            },
            loadData() {
                app.ajax.get(app.config.api.business.notice, {
                    pageNum: 1,
                    pageSize: this.pageSize
                }, (res) => {
                    if (res.list.length === 0) {
                        this.$toast('无公告通知！')
                    } else {
                        this.data = res.list;
                    }
                })
            },
            loadBottom() {
                setTimeout(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:none')
                }, 2000);
                if (this.pageSize <= this.total) {
                    this.pageSize += 10;
                    this.loadData();
                } else {
                    // this.allLoaded = true;// 若数据已全部获取完毕

                    this.$toast('数据已全部获取完毕！')
                }
            },
            loadMore(status) {
                this.$nextTick(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:block')
                })
            },
        },
        mounted() {
            this.setIconData();
            this.loadData();
        }
    }
</script>
<style>
    .service-notice .mint-cell-value {
        width: 100%;
        padding: 10px;
        line-height: 24px;
        text-align: left;
    }
</style>
